Skip to main content

Horizontal list

The Horizontal List component is a versatile layout tool used to organize and display components in a structured, horizontal manner. It is particularly beneficial for applications that require a clear and organized presentation of elements across a page, such as dashboards, galleries, or navigation menus. By using a Horizontal List, businesses can enhance the user experience by providing a clean and intuitive interface that allows users to easily access and interact with content. This component is ideal for creating dynamic and responsive applications that adapt to different screen sizes and content requirements.

Properties​

To effectively utilize a Horizontal List, the following data and attributes are necessary:

  • Component-Level Attributes:
    • Code: A unique identifier for the horizontal list, used for referencing and integration within larger systems or applications. This code is essential for enabling interactions and actions related to the list.
  • Layout Attributes:
    • Alignment Options: These options allow for the alignment of list items, ensuring that the layout is optimized for user experience. Proper alignment helps maintain a consistent and visually appealing design across different devices and screen sizes.
  • Size Attributes:
    • Dynamic Width and Height: The component supports dynamic sizing, allowing the width and height of the list to be defined as percentages or based on the content size. This flexibility enables designers to create responsive applications that adjust to the size of the window or the content within the list, ensuring a seamless user experience.

By structuring the Horizontal List component with these attributes, businesses can create a flexible and user-friendly interface that effectively organizes content. The ability to control layout, alignment, and size dynamically ensures that the Horizontal List remains a powerful tool for designing responsive and engaging applications.

Style​

Best Practices​

  • Responsiveness: Set the list size to "fit to content" to enhance the responsiveness of the application. This ensures that the list adapts to the content size, providing a better user experience.
  • Spacing and Alignment: Use appropriate gaps and alignment settings to ensure the list is visually appealing and easy to read. Consistent spacing between items helps maintain a clean and organized look.
  • Interactivity: Implement hover effects and cursor changes to provide visual feedback to users, enhancing the interactive experience.

Highest Value Features​

  • Gap and Alignment Settings: Properly configuring gaps and alignment can significantly improve the visual structure and readability of the list.
  • Overflow Management: Ensures that content is displayed neatly without breaking the layout.
  • Font and Background Customization: Customizing fonts and backgrounds can enhance the visual appeal and usability of the list.

All the Settings​

Items​

  • GAP: Space between the horizontal items, default is 10 pixels.
  • Row Gap: Space between rows if more than a single row is defined, depending on the "Wrap" setting.
  • Column Gap: Space in pixels between the columns.
  • Direction: Determines how the list is filled when items are added. Options include Left to right (default) and Right to left.
  • Wrap: Options include No wrap, Wrap to multiple lines, and Wrap reverse.
  • Horizontal Alignment: Horizontal alignment of the items in the horizontal list. Options include left (default), center, and right.
  • Vertical Alignment: Vertical alignment of the items in the horizontal list. Options include Top (default), Center, Bottom, Space between, Space around, and Space evenly.

Overflow​

  • Normal or On Hover
    • Overflow X: Options include visible, hidden, scroll, auto, initial, inherit.
    • Overflow Y: Options include visible, hidden, scroll, auto, initial, inherit.

Border​

  • Border Options: Customize the border style, width, and color to define the list's outline and separation between items.

Padding​

  • Padding Options
    • Icon: Adjust padding for all sides, top, left, bottom, right.
    • Size: Set in pixels using up and down arrows or by entering a numeric value.

Background​

  • Normal and On Hover Options:
    • Background Color:
      • Color: Color picker or enter values in HEX, RGBA, HSLA format.
    • Image: OR “select an image” from the media library OR “http” have it referred to an online image.
    • Background Attachment: Options include scroll, fixed, local, initial, inherit.
    • Background Position X/Y: Expressed in pixels (arrow up or down, or number), shift of the background regarding the X-axis (horizontal shift) and Y-axis (vertical shift).
    • Background Repeat: Options include repeat (horizontal and vertical), repeat-x (horizontal repeat), repeat-y (vertical repeat), no-repeat (based upon position one instance), initial (inherits the browser’s default), inherit (inherit from the parent element).
    • Background Size: Options include auto (autofit the size to the element), length, cover, contain, initial (inherits the browser’s default), inherit (inherit from the parent element).
    • Background Origin: Options include border-box, padding-box, content-box, initial (inherits the browser’s default), inherit (inherit from the parent element).

Shadow​

  • Shadow Options: Customize the shadow effect to add depth and focus to the list.

Cursor​

  • Cursor Options: Change the icon of the cursor when hovering over the list to indicate interactivity.

Label Font​

  • Normal and On Hover Options:
    • Alignment: Options include left, center, right, aligned.
    • Font Type: Choose the font family.
    • Font Size: Number expressed in px, em, or rem (em and rem are relative units based on font size).
    • Letter Spacing: In pixels.
    • Line Height: In pixels.
    • Style: Options include normal, italic, oblique, initial (inherits the browser’s default), inherit (inherit from the parent element).
    • Weight: Options include thin, extra light, light, normal, medium, semi bold, bold, extra bold, black.
    • Color: Picker or values in HEX, RGBA, HSLA.
    • Stretch: Options include normal, semi condensed, condensed, extra condensed, ultra condensed, semi expanded, expanded, extra expanded, ultra expanded.
    • Variant: Options include normal, small caps, initial (inherits the browser’s default), inherit (inherit from the parent element).
    • Caps Variant: Options include normal, small caps, all small caps, mini caps, all mini caps, unicase, titling caps, initial (inherits the browser’s default), inherit (inherit from the parent element).

Explanation of Terms​

  • Initial: Sets the property to its default value as defined in the CSS specification.
  • Inherit: Makes the element inherit the property from its parent element.
  • em/rem: Relative units based on the font size of the element or root element, respectively.

This style guide provides a comprehensive overview of the styling options available for the Horizontal List component in NoCode-X, ensuring users can create visually appealing and functional designs.

Actions​

Event: On Click​

  • This action is executed whenever the horizontal list is clicked by the user.
  • It triggers interactions or processes based on the user's click, allowing for dynamic responses within the application.

Compatible functions​

  • Add template element to horizontal list
  • Clear horizontal list